<div class="content-wrap">
    <div id="content" class="content">
        <section id="posts" class="posts-expand">
            <article class="post post-type-normal">
                <header class="post-header">
                    <h1 class="post-title" th:text="${p.title}"></h1>
                    <div class="post-meta">
                            <span class="post-time">
                                <span class="post-meta-item-icon">
                                    <i class="fa fa-calendar-o"></i>
                                </span>
                                <span class="post-meta-item-text">Posted on</span>
                                <time th:text="${#dates.format(p.createTime, 'yyyy-MM-dd')}"></time>
                                &nbsp;&nbsp;/&nbsp;
                                [[${p.category.name}]]
                                &nbsp;/&nbsp;
                                <span th:each="item : ${p.tags}">[[${item.name}]]、</span>
                            </span>
                    </div>
                </header>

                <div class="post-body" th:utext="${p.content}"></div>
                <footer class="post-footer">
                    <div class="post-eof"></div>
                </footer>
            </article>
            <hr/>
        </section>
    </div>

    <div class="comments v">
        <div class="comments-content">
            <el-form :model="form" ref="ruleForm" :rules="rulesForm" size="small">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item prop="nickname">
                            <el-input v-model="form.nickname" placeholder="昵称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="email">
                            <el-input v-model="form.email" placeholder="邮箱"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="content">
                            <el-input v-model="form.content" :autosize="{ minRows: 5}" placeholder="快发表评论吧"
                                      type="textarea"></el-input>
                        </el-form-item>
                        <div style="text-align:right">
                            <el-button @click="handleSubmit('ruleForm')" size="mini" plain>提交</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="comments-count">
            <span>{{list.length}}</span>
            &nbsp;评论
        </div>
        <div class="comments-list">
            <div class="comments-list-item" v-for="item in list">
                <img class="comments-item-img" src="/img/avatar/default.jpg">
                <div class="comments-list-item-view">
                    <div class="comments-item-head">
                        <span class="comments-item-name">{{item.nickname}}</span>
                        <span class="comments-item-device">{{item.device}}</span>
                    </div>
                    <div class="comments-item-time">
                        {{item.createTime}}
                    </div>
                    <div class="comments-item-content">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ElementUI 页面滚动到顶部 -->
<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
